<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";
import { tr } from "element-plus/es/locale";

const option = ref({});
const getData = () => {

  const hourlyYieldRateData = {
    //班次07:00-15:00/15:00-23:00/23:00-07:00
    category: [
      "07:00-08:00", "08:00-09:00", "09:00-10:00", "10:00-11:00",
      "11:00-12:00", "12:00-13:00", "13:00-14:00", "14:00-15:00",
      "15:00-16:00", "16:00-17:00", "17:00-18:00", "18:00-19:00",
      "19:00-20:00", "20:00-21:00", "21:00-22:00", "22:00-23:00",
      "23:00-00:00", "00:00-01:00", "01:00-02:00", "02:00-03:00",
      "03:00-04:00", "04:00-05:00", "05:00-06:00", "06:00-07:00"
    ],
    //尾站下料数
    barData: [
      100, 370, 390, 385, 375, 360, 380, 395,  // 早班 (产出高且稳定)
      305, 295, 310, 300, 285, 270, 260, 245,  // 中班 (产出略有下降)
      172, 165, 158, 150, 143, 135, 127, 120   // 晚班 (产出较低)
    ],
    //首站上料数
    lineData: [
      150, 380, 400, 395, 385, 370, 390, 405,  // 早班
      320, 310, 325, 315, 300, 285, 275, 260,  // 中班
      180, 173, 166, 158, 150, 142, 134, 126   // 晚班
    ],
    rateData: [] // 产出率将自动计算
  };

  // 计算产出率
  hourlyYieldRateData.rateData = hourlyYieldRateData.lineData.map((item, index) => {
    if (item > 0) {
      const outputCut = hourlyYieldRateData.barData[index];
      return (outputCut / item * 100).toFixed(1);
    } else {
      return 0.00.toFixed(1);
    }
  });
  //installationPlan()
  // .then((res) => {
  //   console.log("中下--安装计划", res);
  //   if (res.success) {
  setOption(hourlyYieldRateData);
  //   } else {
  //     ElMessage({
  //       message: res.msg,
  //       type: "warning",
  //     });
  //   }
  // })
  // .catch((err) => {
  //   ElMessage.error(err);
  // });
};
const setOption = async (newData: any) => {
  option.value = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
      formatter: function (params: any) {
        // 添加单位
        var result = params[0].name + "<br>";
        params.forEach(function (item: any) {
          if (item.value) {
            if (item.seriesName == "产出率") {
              result += item.marker + " " + item.seriesName + " : " + item.value + "%</br>";
            } else {
              result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>";
            }
          } else {
            result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>";
          }
        });
        return result;
      },
    },
    legend: {
      data: ["首站上料数", "尾站下料数", "产出率"],
      textStyle: {
        color: "#B4B4B4",
      },
      top: "0",
    },
    grid: {
      left: "50px",
      right: "40px",
      bottom: "30px",
      top: "30px",
    },
    xAxis: {
      data: newData.category,
      axisLine: {
        lineStyle: {
          color: "#B4B4B4",
        },
      },
      axisTick: {
        show: false,
      },
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        interval: 3, // 每隔1个标签显示，避免拥挤
        //rotate: 30 // 标签旋转30度，便于阅读
      }
    },
    yAxis: [
      {
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(31,99,163,.3)",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },
        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(31,99,163,.3)",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },
        axisLabel: {
          formatter: "{value}% ",
        },
      },
    ],
    series: [
      {
        name: "尾站下料数",
        type: "bar",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            // { offset: 0, color: "#956FD4" },
            // { offset: 1, color: "#3EACE5" },
            { offset: 0, color: "#4CAF50" },    // 较亮的绿色
            { offset: 1, color: "#1B5E20" },    // 较深的绿色
          ]),
        },
        label: {
          show: false,
          formatter: (params) => params.value
        },
        data: newData.barData,
      },
      {
        name: "首站上料数",
        type: "bar",
        barGap: "-100%",
        barWidth: 10,
        label: {
          show: false,
          formatter: (params) => params.value
        },
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(156,107,211,0.8)" },
            { offset: 0.2, color: "rgba(156,107,211,0.5)" },
            { offset: 1, color: "rgba(156,107,211,0.2)" },
            // { offset: 0, color: "#2196F3" },    // 较亮的蓝色
            // { offset: 1, color: "#0D47A1" },    // 较深的蓝色
          ]),
        },
        z: -12,
        data: newData.lineData,
      },
      {
        name: "产出率",
        type: "line",
        smooth: true,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 8,
        yAxisIndex: 1,
        label: {
          show: false, // 建议显示标签，方便查看具体数值
          formatter: (params) => params.value + '%',
          color: '#FF9800' // 标签颜色与线条颜色一致
        },
        lineStyle: {
          width: 3, // 加粗线条，使其更醒目
          //color: '#FF9800',// 醒目的橙色
          color: "#F02FC2",
        },
        itemStyle: {
          //color: '#FF9800',// 醒目的橙色
          color: "#F02FC2",
        },
        data: newData.rateData,
      },
    ],
  };
};
onMounted(() => {
  getData();
});
</script>

<template>
  <VueEcharts class="chart" style="width: 650px" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<style scoped lang="scss"></style>
